<?php
if($availableGifts){
echo "<div class='gifts-wrapper'>";
	$this->load->model('tool/image');
	foreach($availableGifts as $gift){
		if($gift['products']){
			echo "<div class='gift'>";
				echo "<div class='gift-name'>".$gift['name']."</div>";
				echo "<div class='gift-message'>".$gift['message']."</div>";
				echo "<div class='gift-products product-grid'>";
					foreach($gift['products'] as $product){
						echo "<div class='gift-item'>";
						$checked = '';
						if($this->session->data['gift-'.$gift['id']] == $product['product_id'])
							$checked = "checked='checked'";
						echo "<input ".$checked." class='select-gift' type='radio' name='gift-".$gift['id']."' value='".$product['product_id']."'/>";

						$image = $this->model_tool_image->resize($product['image'], 80, 80);
						echo "<div class='image'><img src='".$image."' /></div>";
						echo "<div class='name'>".$product['name']."</div>";
						echo "</div>";
					}
				echo "</div>";
			echo "</div>";
			?>
			<script>
				$(document).ready(function(){
					$('input[name="gift-<?php echo $gift['id'];?>"]').change(function(){
						$.ajax({
							url : 'index.php?route=module/td_giftonorder/updateGift',
							type : 'post',
							data : { gift: 'gift-<?php echo $gift['id'];?>', add: $(this).val(), remove: '<?php echo $this->session->data['gift-'.$gift['id']];?>'},
							dataType : 'html',
							beforeSend : function(){
								$('.gift-overlay').show();
							},
							success : function(){
								$('.gift-overlay').hide();
							}
						})
					})
				})
			</script>
			<?php
		}
	}
echo "</div>";
?>
<style>
.gift-overlay{
display:none;
position:fixed;
top:0px;left:0px;
right:0px;
bottom:0px;
z-index:11001;
}
#fountainG{position:relative;width:50px;height:6px;top:50%;left:50%;margin-top:-3px;margin-left:-25px}
.fountainG{
position:absolute;
top:0;
background-color:#6B6B6B;
width:7px;
height:7px;
-moz-animation-name:bounce_fountainG;
-moz-animation-duration:0.6s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-moz-transform:scale(.3);
-moz-border-radius:4px;
-webkit-animation-name:bounce_fountainG;
-webkit-animation-duration:0.6s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-webkit-transform:scale(.3);
-webkit-border-radius:4px;
-ms-animation-name:bounce_fountainG;
-ms-animation-duration:0.6s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-ms-transform:scale(.3);
-ms-border-radius:4px;
-o-animation-name:bounce_fountainG;
-o-animation-duration:0.6s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-o-transform:scale(.3);
-o-border-radius:4px;
animation-name:bounce_fountainG;
animation-duration:0.6s;
animation-iteration-count:infinite;
animation-direction:linear;
transform:scale(.3);
border-radius:4px;
}

#fountainG_1{
left:0;
-moz-animation-delay:0.24s;
-webkit-animation-delay:0.24s;
-ms-animation-delay:0.24s;
-o-animation-delay:0.24s;
animation-delay:0.24s;
}

#fountainG_2{
left:6px;
-moz-animation-delay:0.3s;
-webkit-animation-delay:0.3s;
-ms-animation-delay:0.3s;
-o-animation-delay:0.3s;
animation-delay:0.3s;
}

#fountainG_3{
left:13px;
-moz-animation-delay:0.36s;
-webkit-animation-delay:0.36s;
-ms-animation-delay:0.36s;
-o-animation-delay:0.36s;
animation-delay:0.36s;
}

#fountainG_4{
left:19px;
-moz-animation-delay:0.42s;
-webkit-animation-delay:0.42s;
-ms-animation-delay:0.42s;
-o-animation-delay:0.42s;
animation-delay:0.42s;
}

#fountainG_5{
left:25px;
-moz-animation-delay:0.48s;
-webkit-animation-delay:0.48s;
-ms-animation-delay:0.48s;
-o-animation-delay:0.48s;
animation-delay:0.48s;
}

#fountainG_6{
left:31px;
-moz-animation-delay:0.54s;
-webkit-animation-delay:0.54s;
-ms-animation-delay:0.54s;
-o-animation-delay:0.54s;
animation-delay:0.54s;
}

#fountainG_7{
left:38px;
-moz-animation-delay:0.6s;
-webkit-animation-delay:0.6s;
-ms-animation-delay:0.6s;
-o-animation-delay:0.6s;
animation-delay:0.6s;
}

#fountainG_8{
left:44px;
-moz-animation-delay:0.66s;
-webkit-animation-delay:0.66s;
-ms-animation-delay:0.66s;
-o-animation-delay:0.66s;
animation-delay:0.66s;
}

@-moz-keyframes bounce_fountainG{
0%{
-moz-transform:scale(1);
background-color:#6B6B6B;
}

100%{
-moz-transform:scale(.3);
background-color:#6B6B6B;
}

}

@-webkit-keyframes bounce_fountainG{
0%{
-webkit-transform:scale(1);
background-color:#6B6B6B;
}

100%{
-webkit-transform:scale(.3);
background-color:#6B6B6B;
}

}

@-ms-keyframes bounce_fountainG{
0%{
-ms-transform:scale(1);
background-color:#6B6B6B;
}

100%{
-ms-transform:scale(.3);
background-color:#6B6B6B;
}

}

@-o-keyframes bounce_fountainG{
0%{
-o-transform:scale(1);
background-color:#6B6B6B;
}

100%{
-o-transform:scale(.3);
background-color:#6B6B6B;
}

}

@keyframes bounce_fountainG{
0%{
transform:scale(1);
background-color:#6B6B6B;
}

100%{
transform:scale(.3);
background-color:#6B6B6B;
}

}

</style>
<div class="gift-overlay">
<div id="fountainG">
<div id="fountainG_1" class="fountainG">
</div>
<div id="fountainG_2" class="fountainG">
</div>
<div id="fountainG_3" class="fountainG">
</div>
<div id="fountainG_4" class="fountainG">
</div>
<div id="fountainG_5" class="fountainG">
</div>
<div id="fountainG_6" class="fountainG">
</div>
<div id="fountainG_7" class="fountainG">
</div>
<div id="fountainG_8" class="fountainG">
</div>
</div>
</div>
<?php
}
?>